{% extends 'store/blank.html' %}

{% block header %}
<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>天天生鲜</title>

  <!-- Custom fonts for this template-->
  <link href="/static/store/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <!-- Custom styles for this template-->
  <link href="/static/store/css/sb-admin-2.min.css" rel="stylesheet">

</head>
{% endblock %}

    {% block content %}
    <!-- Begin Page Content -->
    <div class="container-fluid">
    <!--添加商品按钮-->
    <div class="row">
        <button class="btn btn-primary col-lg-2 ml-auto" data-toggle="modal" data-target="#goods_modal">添加商品</button>
    </div>
    <h1></h1>
    <!--商品列表-->
    <div class="row">
      <table class="table">
          <thead>
            <tr>
                <th>类型编号</th>
                <th>类型名称</th>
                <th>商品图片</th>

            </tr>
          </thead>
          <tbody>
          {% for t in g_type %}
            <tr>
                <td>{{ t.id }}</td>
                <td>
                    <a href="#">{{ t.goods_type_name }}</a>
                </td>
                <td><img src="/static/{{ t.goods_image }}/" alt={{ t.goods_type_name }} style="width:30px;"></td>
                <td>
                    <button class="btn btn-primary col-lg-2 ml-auto, change_type" data-toggle="modal" data-target="#type_modal"  value="{{ t.id }}">添加商品</button>
                    <a href="{% url 'deltype' t.id  %}" class="btn btn-danger">删除</a>
                </td>
            </tr>
          {% endfor %}

          </tbody>
      </table>
    </div>
    <h1></h1>
    <!--分页-->
    <div class="row">
        <ul class="pagination ml-auto">
            <li class="page-item">
                <a class="page-link">上一页</a>
            </li>
            <li class="page-item">
                <a class="page-link">1</a>
            </li>
            <li class="page-item">
                <a class="page-link">2</a>
            </li>
                                <li class="page-item">
                <a class="page-link">3</a>
            </li>
            <li class="page-item">
                <a class="page-link">4</a>
            </li>
            <li class="page-item">
                <a class="page-link">下一页</a>
            </li>
        </ul>
    </div>
    </div>
    <!--添加类型模态框-->
    <div class="modal fade" id="goods_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-label="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">添加类型</div>
              <div class="modal-body">
                  <form class="form" method="post" enctype="multipart/form-data">
                      {% csrf_token %}
                      <div class="form-group">
                        <label class="">类型名称</label>
                        <input class="form-control" type="text" name="t_name">
                      </div>
                      <div class="form-group">
                        <label class="">类型图片</label>
                        <input class="form-control" type="file" name="t_pic">
                      </div>
                      <button class="btn btn-primary fa-pull-right" type="submit">提交</button>
                  </form>
              </div>
          </div>
      </div>
  </div>
    <!--修改类型模态框-->
    <div class="modal fade" id="type_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-label="true">
      <div class="modal-dialog" role="document">
          <div class="modal-content">
              <div class="modal-header">修改类型</div>
              <div class="modal-body">
                  <form class="form" method="post" enctype="multipart/form-data" action="/store/changetype/">
                      {% csrf_token %}

                        <input class="form-control" type="hidden" name="t_id" id="change_type_id">

                      <div class="form-group">
                        <label class="">类型名称</label>
                        <input class="form-control" type="text" name="t_name" id="change_type_name">
                      </div>
                      <div class="form-group">
                        <label class="">类型图片</label>
                        <input class="form-control" type="file" name="t_pic">
                      </div>
                      <button class="btn btn-primary fa-pull-right" type="submit">提交</button>
                  </form>
              </div>
          </div>
      </div>
  </div>
    {% endblock %}

{% block script %}
<!-- Bootstrap core JavaScript-->
  <script src="/static/store/vendor/jquery/jquery.min.js"></script>
  <script src="/static/store/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="/static/store/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for all pages-->
  <script src="/static/store/js/sb-admin-2.min.js"></script>
    <script>
        $('.change_type').click(function(){
            $.ajax({
                url:'/store/changetype/?t_id=' + this.value,
                type:'get',
                data:'',
                success: function(result){
                    $('#change_type_name').attr('value',result.t.type);
                    $('#change_type_id').attr('value',result.t.id);
                },
                error:function(err){
                    console.log(err);
                }
            })
        });
    </script>
{% endblock %}
